<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>AMR_test</title>
    <style>
        #fixed{
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 9;
            background: rgba(0,0,0,0.8);
            color: #fff;
            font-size: 40px;
            animation: huxi .3s ease infinite alternate;
            transform-origin: top left;
        }
        @keyframes huxi {
            from {
                transform: scale(1);
            }
            to {
                transform: scale(1.02);
            }

        }
    </style>
</head>
<body>
<div id="fixed">加载中，请稍等...</div>
<div id="player-amr">
    <p>
        <button id="amr-load">点击我，加载线上的AMR音频文件，之后点击播放</button>
    </p>
    <p>
        <button id="amr-play" disabled="">播放</button>
        <button id="amr-stop" disabled="">停止</button>
        <input id="amr-progress" type="range" min="0" max="1" step="any" value="0" disabled="">
        <label for="amr-progress">
            <span id="amr-cur">0'</span>
            <span>/</span>
            <span id="amr-duration">0'</span>
        </label>
    </p>
</div>
<script src="./BenzAMRRecorder.js"></script>
<script>
    var _doc=document.getElementsByTagName('head')[0];
    var script=document.createElement('script');
    script.setAttribute('type','text/javascript');
    script.setAttribute('src','./BenzAMRRecorder.js');
    _doc.appendChild(script);

    function E(selector) {
        return document.querySelector(selector);
    }

    script.onload = function () {

        (function () {
            function E(selector) {
                return document.querySelector(selector);
            }
            E('#fixed').style.display = "none";


            var amr;

            var loadDemoBtn = E('#amr-load');
            var playBtn = E('#amr-play');
            var stopBtn = E('#amr-stop');
            var progressCtrl = E('#amr-progress');
            var isDragging = false;
            var cur = E('#amr-cur');
            var duration = E('#amr-duration');

            loadDemoBtn.onclick = function() {
                amr = new BenzAMRRecorder();
                loadDemoBtn.setAttribute('disabled', true);
                playBtn.setAttribute('disabled', true);
                stopBtn.setAttribute('disabled', true);
                progressCtrl.setAttribute('disabled', true);
                amr.initWithUrl('https://a1.easemob.com/moshou2016/51moshouapp/chatfiles/7a7a7a50-fca2-11ea-9f86-8924b5f67b74').then(function () {
                    loadDemoBtn.removeAttribute('disabled');
                    // loadAmrFile.removeAttribute('disabled');
                    playBtn.removeAttribute('disabled');
                    stopBtn.removeAttribute('disabled');
                    progressCtrl.removeAttribute('disabled');
                    progressCtrl.setAttribute('max', amr.getDuration());
                    duration.innerHTML = amr.getDuration().toFixed(2) + '\'';
                });

                // 绑定事件
                amr.onPlay(function () {
                    console.log('Event: play');
                    playBtn.innerHTML = '暂停';
                });
                amr.onStop(function () {
                    console.log('Event: stop');
                    playBtn.innerHTML = '播放';
                });
                amr.onPause(function () {
                    console.log('Event: pause');
                    playBtn.innerHTML = '继续';
                });
                amr.onResume(function () {
                    console.log('Event: resume');
                    playBtn.innerHTML = '暂停';
                });
                amr.onEnded(function () {
                    console.log('Event: ended');
                    playBtn.innerHTML = '播放';
                });
                amr.onAutoEnded(function () {
                    console.log('Event: autoEnded');
                });
                amr.onStartRecord(function () {
                    console.log('Event: startRecord');
                });
                amr.onFinishRecord(function () {
                    console.log('Event: finishRecord');
                });
                amr.onCancelRecord(function () {
                    console.log('Event: cancelRecord');
                });
            };


            setInterval(function () {
                if (amr) {
                    cur.innerHTML = amr.getCurrentPosition().toFixed(2) + '\'';
                    if (!isDragging) {
                        progressCtrl.value = amr.getCurrentPosition().toFixed(2);
                    }
                } else {
                    cur.innerHTML = '0\'';
                }
            }, 10);



            playBtn.onclick = function () {
                amr.playOrPauseOrResume();
            };

            stopBtn.onclick = function () {
                amr.stop();
            };

            progressCtrl.onmousedown = function () {
                isDragging = true;
            };
            progressCtrl.onmouseup = function () {
                isDragging = false;
            };
            progressCtrl.onchange = function (e) {
                amr.setPosition(e.target.value);
            };
            

        })();
    }


</script>
</body>
</html>